<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ul>
        <li>hello world1</li>
        <li>hello world2</li>
    </ul>
    <script>
        var ele1 = document.getElementsByTagName("ul")[0]
        console.info(ele1.childNodes); // 节点： 包括 text, 元素， 注释
        console.info(ele1.children); // 所有的元素
    </script>
    <button onclick="goBaidu()">百度</button>
    <a name="hida" href="http://www.baidu.com" style="display: none;">百度</a>
    <p id="p1"></p>
    <script>
        function goBaidu() {
            // document.getElementsByName("hida")[0].click();
            location.href = 'http://www.baidu.com';
            
        }
        p1.innerHTML= screen.width + ":" + screen.height + "-avail" + screen.availWidth;

        window.navigator.geolocation
    </script>
    <a href="test1.html">test1</a>
    <!-- a标签点击会发生跳转。不想要跳转功能用href=‘javascript:void(0)’ -->
    <a href="javascript:void(0)" onclick="history.go(-1)" >后退</a>
    <a href="javascript:void(0)" onclick="history.go(0)" >刷新</a>
    <a href="javascript:void(0)" onclick="history.go(1)">前进</a>

    <div id="sec" style="margin-left:200px;width: 20px;transform: rotate(45deg);transform-origin: center bottom;">
        <div style="width: 0px;height:0px;border-bottom: 10px  red solid;border-left: 10px  transparent solid;border-right: 10px  transparent solid;"></div>
        <div style="transform: translateX(7px);width: 5px;height:100px;background-color: red"></div>
    </div>
    <button onclick="toggle(this)">暂停</button>
    <progress max=100 value="10"></progress>
    <script>
        function move() {
            var n = new Date().getSeconds() * 6 + "deg";
            var ele = document.getElementById("sec");
            ele.style.transform = `rotate(${n})`
            // setTimeout(move, 1000)
        }
        // setTimeout(move, 1000)
        var job = setInterval(move, 1000)

        function toggle(ele) {
            if (ele.innerHTML == '暂停') {
                clearInterval(job)
                ele.innerHTML = '开始'
            } else {
                job = setInterval(move, 1000)
                ele.innerHTML = '暂停'
            }
                
        }
    </script>
</body>
</html>